<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/style.css" />
		<style type="text/css">			
			form{
				width: 400px;
				margin: 0 auto;
			}
			.list{
				list-style: none;
				font-size: 15px;
				color: #292929;				
			}
			.list li{
				margin-bottom: 13px;
			}
			select,[type="text"],textarea,select{
				width: 80px;
				border: solid 1px #e1e1e1;
				border-radius: 4px;
				height: 24px;
			}
			[type="text"]{
				width:56%;
			}
			textarea{
				width:56%;
				height: 80px;
				min-height: 80px;
				max-height: 80px;
				max-width: 56%;
				min-width: 56%;
				resize: none;
			}
			.list span{
				margin-right: 50px;
			}
			.num{
				margin-left: 117px;
				margin-top: 3px;
			}
			[type="submit"]{
				border: solid 1px black;
				background: black;
				width: 98px;
				height: 28px;
				color: white;
				margin-bottom: 50px;
			}
			[type="submit"]:hover{
				background: rgb(255,85,0);
			}
			.img1{
					position: relative;
					top: 2px;
				}
			@media  screen  and (max-width: 640px) {
				.main {
				    width: 100%;
				    margin: 0px auto 0px;
				}
				.line_title h1{
					font-size: 20px;
				}
				form {
			    	width: 95%;
			    }
			    .list span{
			    	display: block;
			    	margin-bottom: 4px;
			    }
			    [type="text"] {
				    width: 80%;
				}
				textarea{
					min-height: 80px;
				    max-height: 80px;
				    max-width: 80%;
				    min-width: 80%;
				}
				label{
					position: relative;
				}
				.img1{
					position: absolute;
					top: 18px;
					margin-left: 2px;
				}
			}
		</style>
	</head>
	<body>
		<div class="main">
			<img class="car" src="img/10001.jpg" />
			<div class="line">
				<div class="line_title">
					<h1>在线预约</h1>
					<p>Online Appointment</p>
				</div>
			</div>
			<form>
				<ul class="list">
					<li>
						<label>
							<span>预约服务:</span>
							<select>
								<option>汽车美容</option>
								<option>汽车维修</option>
								<option>汽车喷漆</option>
							</select>
						</label>
					</li>
					<li>
						<label>
							<span>预约服务:</span>
							<select>
								<option>年</option>
							</select>
							<select>
								<option>月</option>
							</select>
							<select>
								<option>日</option>
							</select>
							<img class="img1" src="img/aa.png" />
						</label>
					</li>
					<li>
						<label>
							<span>你的姓名:</span>
							<input type="text" />
						</label>
					</li>
					<li>
						<label>
							<span>你的性别:</span>
							<input type="radio"  name="myradio"/>男
							<input type="radio"  name="myradio"/>女
						</label>
					</li>
					<li>
						<label>
							<span>你的电话:</span>
							<input type="text" />
						</label>
					</li>
					<li>
						<label>
							<span>补充说明:</span>
							<textarea></textarea>
						</label>
					</li>
					<li>
						<label>
							<span>验证码:&ensp;&ensp;</span>
							<input type="text" />
							<img class="num" src="img/bb.png" />
						</label>
					</li>
				</ul>
				<input type="submit" value="提交预约" />
			</form>
		</div>
	</body>
</html>
